<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link th:href="@{/bootstrap/bootstrap.min.css}" rel="stylesheet"/>
    <title>Bootstrap Video View</title>
</head>
<body>


<ul class="nav nav-pills mb-3 nav-fill" id="pills-tab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
           aria-controls="pills-home" aria-selected="true">图片</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
           aria-controls="pills-profile" aria-selected="false">视频</a>
    </li>

</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
        <div class="card-group">
            <div class="card">
                <img class="card-img-top" src=".../100px180/" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This card has supporting text below as a natural lead-in to additional
                        content.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{/bootstrap/bootstrap-pagination-spirit.js}"></script>
<script>

    var dataVideos = "[[${videos}]]";
    var dataImages = "[[${images}]]";
    $(function () {
        function initVideo() {
            var datas = dataImages;
            var datastring = datas.substring(1, datas.length - 1);
            // console.log(datastring)
            var data = datastring.split(", http://")
            $("#pills-home").html("");
            for (var i = 0; i < data.length; i = i + 2) {
                if(i>180){
                    break;
                }
                var htmlData = ' <div class="card-group">\n';
                for (var j = 0; j < 2; j++) {
                    var item = data[i + j];
                    if (!item) {
                        continue;
                    }
                    item = item.trim();
                    var origin = item;
                    item = item.indexOf("http://") > -1 ? item : "http://" + item;
                    item = encodeURI(item);
                    htmlData += '  <div class="card">\n' +
                        '                <img class="card-img-top" src="none"  alt="' + item + '">\n' +
                        '                <div class="card-body">\n' +
                        // '                    <h5 class="card-title">' + origin + '</h5>\n' +
                        // '                    <p class="card-text">' + origin + '</p>\n' +
                        '                    <p class="card-text"><small class="text-muted">' + origin + '</small></p>\n' +
                        '                </div>\n' +
                        '            </div>\n'
                }
                htmlData += '</div>'
                $("#pills-home").append(htmlData);
            }
        }

        function initImage() {
            var datas = dataVideos;
            var datastring = datas.substring(1, datas.length - 1);
            var data = datastring.split(", http://")
            $("#carouselExampleFade >.carousel-inner").html("");
            for (var i = 0; i < data.length; i++) {
                var item = data[i];
                if (!item) {
                    continue;
                }
                item = item.trim();
                var origin = item;
                origin = origin.substr(origin.lastIndexOf("/") + 1);
                item = item.indexOf("http://") > -1 ? item : "http://" + item;
                item = encodeURI(item);
                var htmlData;
                if (i !== 0) {
                    htmlData = ' <div class="carousel-item " style="background-color: #0C0C0C">\n'
                } else {
                    htmlData = ' <div class="carousel-item active" style="background-color: #0C0C0C">\n'
                }
                // htmlData += ' <img class="d-block w-100" style="width: auto;max-width: 100%;max-height: 20%"  src="' + item + '" alt="' + origin + '">\n' +
                //     ' </div>';
                htmlData += '<video height="50%" style="width: 60% ;margin-left: 20%" onplay="videoShow(this)" onpause="showTips" onvolumechange="videoChange(this)" controls><source src="' + item + '" type="video/mp4"></video>';
                htmlData += ' <div class="carousel-caption d-none d-md-block videoOverride"  style="margin-bottom: 10%">\n' +
                    // '<h5>' + origin + '</h5>\n' +
                    ' <p>' + origin + '</p>\n' +
                    '  </div>' +
                    ' </div>';

                $("#carouselExampleFade > .carousel-inner").append(htmlData);
            }
        }

        initImage();
        initVideo();
        initImgLazy();


    });


    $('.carousel').carousel()


</script>

<script type="text/javascript">
    var lastVideo;

    function videoShow(_video) {
        $(".videoOverride").hide();
        $('.carousel').carousel('pause')
        var vids = document.getElementsByTagName('video');
        if (lastVideo) {
            _video.volume = lastVideo;
        }
        for (var i = 0; i < vids.length; i++) {
            var video = vids[i]
            if (video !== _video) {
                video.pause();
            } else {
                console.log("当前视频 不要停止---------------------------------------")
            }
        }
    }

    function videoChange(_video) {
        lastVideo = _video.volume;
        console.log('视频音量', lastVideo)
    }

    function showTips() {
        $(".videoOverride").show();
    }
</script>


<script>
    function initImgLazy() {


        var num = $("#pills-home").find("img").length;
        var img = $("#pills-home").find("img");
        var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
        lazyload(); //页面载入完毕加载可是区域内的图片
        window.onscroll = lazyload;

        function lazyload() { //监听页面滚动事件
            // debugger
            var seeHeight = document.documentElement.clientHeight; //可见区域高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
            for (var i = n; i < num; i++) {
                console.log("图片懒加载", img[i].offsetTop, seeHeight + scrollTop)
                if (img[i].offsetTop < seeHeight + scrollTop) {
                    if (img[i].getAttribute("src") === "none") {
                        img[i].src = img[i].getAttribute("alt");
                        console.log("图片懒加载", img[i].src)
                    }
                    n = i + 1;
                }
            }
        }
    }
</script>
<!--————————————————-->
<!--版权声明：本文为CSDN博主「MINO吖」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。-->
<!--原文链接：https://blog.csdn.net/qq_36157085/article/details/88556107-->
</body>
</html>